{% load my_filters_and_tags %}

<!-- 列表循环 -->
<div class="row mt-2">
    {% for article in articles %}
        <!-- 文章内容 -->

        <!-- 标题图 -->
        {% if article.avatar %}
            <div class="col-3">
                <img src="{{ article.avatar.url }}"
                     alt="avatar"
                     style="max-width:100%; border-radius: 20px"
                >

            </div>
        {% endif %}

        <div class="col">
            <!-- 栏目 -->
            {% if article.column %}
                <button type="button"
                        class="btn btn-sm mb-2
                        {% if article.column.title == '散文' %}
                            btn-success
                        {% elif article.column.title == '编程' %}
                            btn-danger
                        {% elif article.column.title == '其它' %}
                            btn-warning
                        {% endif %}
                    "
                >
                    {{ article.column }}
                </button>
            {% endif %}

            <!-- 标签 -->
            <span>
                {% for tag in article.tags.all %}
                    <a href="#"
                       class="badge badge-secondary"
                    >
                        {{ tag }}
                    </a>
                {% endfor %}
            </span>

            <!-- 标题 -->
            <h4>
                <b>
                    <a href="{% url 'article:article_detail' article.id %}"
                       style="color: black;"
                    >
                        {{ article.title }}
                    </a>
                </b>
            </h4>
            <!-- 摘要 -->
            <div>
                <p style="color: gray;">
                    {{ article.body|slice:'100' }}...
                </p>
            </div>
            <!-- 注脚 -->
            <p>
                <!-- 附加信息 -->
{#                <span style="color: green;">#}
{#                    {{ article.total_views }} 浏览&nbsp;&nbsp;&nbsp;#}
{#                </span>#}
{#                <span style="color: blue;">#}
{#                    {{ article.created|date:'Y-m-d' }} 发布&nbsp;&nbsp;&nbsp;#}
{#                    #}
{#                </span>#}
{#                <span style="color: darkred;">#}
{#                    {{ article.updated|date:'Y-m-d' }} 更新#}
{#                </span>#}

                <!-- 附加信息，增加了图标 -->
                <span>
                    <i class="fas fa-eye" style="color: lightskyblue;"></i>
                    {{ article.total_views }}&nbsp;&nbsp;&nbsp;
                </span>
                <span>
                    <i class="fas fa-comments" style="color: yellowgreen;"></i>
                    <!-- 修改为评论的计数 -->
                    {{ article.comments.count }}&nbsp;&nbsp;&nbsp;
                </span>
                <span>
                    <i class="fas fa-clock" style="color: pink;"></i>
                    <!-- 新代码 -->
                    {{ article.created|timesince_zh }}
                </span>

            </p>
        </div>



        <hr style="width: 100%;"/>
    {% endfor %}
</div>